<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>黑马妹妹</title>
		<!-- 初始化css -->
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<!-- 轮播图css -->
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<!-- 首页css -->
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<section class="warp">
			<!-- 头部区域 -->
			<header class="header">黑马面面</header>
			<!-- 导航栏部分 -->
			<nav class="nav">
				<a class="items" href="javascript:;">
					<img src="icons/icon1.png" >
					<span>HR面试</span>
				</a>
				<a class="items" href="javascript:;">
					<img src="icons/icon2.png" >
					<span>笔试</span>
				</a>
				<a class="items" href="javascript:;">
					<img src="icons/icon3.png" >
					<span>技术面试</span>
				</a>
				<a class="items" href="javascript:;">
					<img src="icons/icon4.png" >
					<span>模拟面试</span>
				</a>
				<a class="items" href="javascript:;">
					<img src="icons/icon5.png" >
					<span>面试技巧</span>
				</a>
				<a class="items" href="javascript:;">
					<img src="icons/icon6.png" >
					<span>查询薪资</span>
				</a>
			</nav>
			<!-- go模块 -->
			<section class="go">
				<img src="images/go.png" >
			</section>
		</section>
		<!-- 就业指导模块 -->
		<section class="content">
			<!-- 头部 -->
			<div class="con-hd">
				<h4>
					<span class="icon"><img src="icons/i2.png" ></span>
					就业指导
				</h4>
				<a class="more" href="javascript:;">更多>></a>
			</div>
			<!-- 旋转木马轮播图模块 -->
			<div class="get_job_focus">
				<!-- swiper -->
				<div class="swiper-container get_job_fo">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href="javascript:;">
								<img src="images/pic.png" >
							</a>
							<p>老师教你应对面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;">
								<img src="images/ldh.jpg" >
							</a>
							<p>老师教你应对面试技巧</p>
						</div>
						<div class="swiper-slide">
							<a href="javascript:;">
								<img src="images/3.jpg" >
							</a>
							<p>老师教你应对面试技巧</p>
						</div>
						
					</div>
				</div>
				<!-- 添加左右箭头 根据需求把这个代码放到container外面-->
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
		</section>
		<!-- 充电学习模块 -->
		<section class="content study_con">
			<!-- 头部 -->
			<div class="con-hd">
				<h4>
					<span class="icon"><img src="icons/i1.png" ></span>
					充电学习
				</h4>
				<a class="more" href="javascript:;">更多>></a>
			</div>
			<!-- 学习模块轮播图 -->
			<div class="study">
				<!-- swiper -->
				<div class="swiper-container study_fo">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img src="images/pic1.png" >
							<h5>说低调英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="images/pic2.png" >
							<h5>说低调英语，告别中式英语</h5>
							<p>125人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="images/pic1.png" >
							<h5>说低调英语，告别中式英语</h5>
							<p>156人学习</p>
						</div>
						<div class="swiper-slide">
							<img src="images/pic2.png" >
							<h5>说低调英语，告别中式英语</h5>
							<p>125人学习</p>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- 底部 -->
		<footer class="footer">
			<a class="item" href="javascript:;">
				<img src="icons/home.png" >
				<p>首页</p>
			</a>
			<a class="item" href="javascript:;">
				<img src="icons/net.png" >
				<p>技术面试</p>
			</a>
			<a class="item" href="javascript:;">
				<img src="icons/ms.png" >
				<p>模拟面试</p>
			</a>
			<a class="item" href="javascript:;">
				<img src="icons/user.png" >
				<p>我的主页</p>
			</a>
		</footer>
	</body>
</html>
	<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 第一个函数里面是 就业指导轮播图
		(function () {
			var swiper = new Swiper(".get_job_fo",{
				slidesPerView: 2,
				// 每个slider之间的距离
				spaceBetween: 30,
				centeredSlides: true,
				loop: true,
				// 添加左右箭头
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				},
			});
		})();
		// 第二个函数的轮播图
		(function () {
			var swiper = new Swiper(".study_fo", {
				slidesPerView: 2.2,
				spaceBetween: 20,
			})
		})()
	</script>